<template>
    <div class="recharge-item">
        <div class="recharge-content">
            <div class="recharge-price">
                <div class="price">￥<span>{{amount}}</span></div>
                <div v-if="giftAmount" class="price-discount">送{{giftAmount}}元</div>
            </div>
            <div class="recharge-gift text-overflow">{{giveValue}}</div>
            <div class="recharge-action">
                <div class="recharge-btn" @click="click"></div>
            </div>
        </div>
    </div>
</template>

<script>
import { Tag, Button } from 'vant';
import { getRechargeGiveText } from '@biztools/recharge';
export default {
    name: 'RechargeItem',
    components: {
        Tag,
        Button,
    },
    computed: {
        dealType() {
            return (type) => {
                return type;
            };
        },
        giveValue() {
            const { coupons } = this.$props;
            return getRechargeGiveText(coupons);
        },
    },
    props: {
        itemData: Object,
        giftAmount: Number,
        amount: Number,
        coupons: {
            type: Array,
            default() {
                return [];
            },
        },
    },
    methods: {
        click() {
            const { itemData } = this.$props;
            this.$emit('click', itemData);
        },
    },
};
</script>

<style lang="less">
@recharge-item-width: 160px;
@recharge-item-height: 100px;
@recharge-item-bg-start: #EFE0C8;
@recharge-item-bg-end: #E8CFAE;
@re-item-price-discount-bg-start: #FF986D;
@re-item-price-discount-bg-end: #FF6767;
.recharge-item {
    .m-l(@gap-md);
    display: inline-block;
    width: @recharge-item-width;
    height: @recharge-item-height;
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
    .border-radius();
    overflow: hidden;
    &:nth-child(2n-1) {
        background-image: url('../../../assets/icon/card_bg_one.png');
    }
    &:nth-child(2n) {
        background-image: url('../../../assets/icon/card_bg_two.png');
    }
    .recharge-content {
        .p-h(@gap);
        display: flex;
        flex-direction: column;
        .recharge-price {
            height: 45px;
            .flex();
            align-items: center;
            .price {
                .flex();
                align-items: flex-end;
                font-size: @font-size-sm;
                color: @white;
                .m-r(@gap);
                > span {
                    font-size: 20px;
                }
            }
            .price-discount {
                color: @white;
                .font-size-mini();
                height: 18px;
                .p-h(@gap-sm);
                background-color: rgba(0,0,0,0.12);
                border-radius: 3px;
            }
        }
        .recharge-gift {
            max-width: 85%;
            height: 25px;
            color: @white;
            .font-size-mini();
            line-height: 25px;
        }
        .recharge-action {
            .recharge-btn {
                height: 20px;
                width: 55px;
                border-radius: 10px;
                line-height: 18px;
                font-size: @font-size-mini;
                background-image: url('../../../assets/icon/recharge_btn.png');
                background-repeat: no-repeat;
                background-size: 100%;
            }
        }
    }
}
</style>

